<template>
  <div class="module card">
    <div class="module-header">
      <h2><el-icon><Medal /></el-icon> 我的奖状</h2>
      <div class="tabs-container">
        <!-- 使用 :model-value 替代 v-model -->
        <el-radio-group
            :model-value="activeTabAward"
            size="small"
            @change="handleTabChange"
        >
          <el-radio-button label="personal">个人奖状</el-radio-button>
          <el-radio-button label="class">班级奖状</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="module-body">
      <div v-if="filteredCertificates.length > 0" class="certificates-grid">
        <div
            class="certificate-item"
            v-for="certificate in filteredCertificates"
            :key="certificate.id"
            @click="handleCertificateClick(certificate)"
        >
          <div class="certificate-icon">
            <el-icon><Medal /></el-icon>
          </div>
          <div class="certificate-details">
            <div class="certificate-title">{{ certificate.title }}</div>
            <div class="certificate-info">
              <span class="certificate-type">{{ certificate.type === 'personal' ? '个人' : '班级' }}</span>
              <span class="certificate-date">获得时间: {{ certificate.date }}</span>
            </div>
          </div>
        </div>
      </div>

      <div v-else class="empty-state">
        <el-empty description="暂无奖状记录" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, defineProps, defineEmits } from 'vue';
import { Medal } from '@element-plus/icons-vue';

const props = defineProps({
  certificates: {
    type: Array,
    required: true,
    default: () => []
  },
  activeTabAward: {
    type: String,
    default: 'personal'
  }
});

const emits = defineEmits(['update:activeTabAward']);

// 根据当前选项卡过滤奖状
const filteredCertificates = computed(() => {
  return props.certificates.filter(
      certificate => certificate.type === props.activeTabAward
  );
});

// 处理选项卡变化
const handleTabChange = (value) => {
  emits('update:activeTabAward', value);
};

// 处理奖状点击
const handleCertificateClick = (certificate) => {
  // 这里可以添加奖状点击后的具体逻辑
};
</script>

<style scoped>
.module {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.module:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.module-header {
  position: relative;
  padding: 16px 20px;
  background: #1e62ec;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.module-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tabs-container {
  display: flex;
  align-items: center;
}

/* 选项卡样式 */
:deep(.el-radio-group) {
  margin-left: 15px;
}

:deep(.el-radio-button) {
  --el-radio-button-checked-bg-color: rgba(255, 255, 255, 0.2);
  --el-radio-button-checked-text-color: white;
  --el-radio-button-checked-border-color: transparent;
}

:deep(.el-radio-button__inner) {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  padding: 5px 15px;
  font-size: 13px;
  transition: all 0.3s;
}

:deep(.el-radio-button__inner:hover) {
  color: white;
  background: rgba(255, 255, 255, 0.15);
}

:deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-radius: 4px 0 0 4px;
}

:deep(.el-radio-button:last-child .el-radio-button__inner) {
  border-radius: 0 4px 4px 0;
}

.module-body {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* 奖状网格布局 */
.certificates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.certificate-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #ebeef5;
  background: linear-gradient(to right, #fff8e6, #fff);
  position: relative;
  overflow: hidden;
}

.certificate-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.certificate-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, #ffd700, #ffb700);
}

.certificate-icon {
  width: 60px;
  height: 60px;
  background: #fffae6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
  border: 2px solid #ffd700;
}

.certificate-icon .el-icon {
  font-size: 32px;
  color: #ffb700;
}

.certificate-details {
  flex-grow: 1;
  min-width: 0;
}

.certificate-title {
  font-size: 16px;
  font-weight: 600;
  color: #d48806;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.certificate-info {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: #8c8c8c;
}

.certificate-type {
  background: #fff7e6;
  color: #d48806;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 4px;
  width: fit-content;
}

.certificate-date {
  font-size: 12px;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #a8a8a8;
  font-style: italic;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .module-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .tabs-container {
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 992px) {
  .certificates-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .certificate-item {
    padding: 12px;
  }

  .certificate-icon {
    width: 50px;
    height: 50px;
    margin-right: 12px;
  }

  .certificate-icon .el-icon {
    font-size: 28px;
  }

  .certificate-title {
    font-size: 15px;
  }

  .certificate-info {
    font-size: 12px;
  }

  :deep(.el-radio-button__inner) {
    padding: 4px 12px;
    font-size: 12px;
  }
}
</style>
